<template>

  <el-container style="min-height: 100vh;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246); height: 100%">
      <Aside />
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc;line-height: 60px;">
        <el-dropdown style="cursor:pointer ">
          <span>Hoshiyomi</span><i class="el-icon-position"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-main>
        <div style="margin: 10px 0">
          <el-input style="width: 200px"  placeholder="输入姓名" suffix-icon="el-icon-search"></el-input><el-button class="ml-5" type="primary">搜索</el-button>
          <el-input style="width: 200px"  placeholder="输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input><el-button class="ml-5" type="primary">搜索</el-button>
        </div>
        <div style="margin: 10px 0">
          <el-button type="primary">新增</el-button>
          <el-button type="danger">批量删除</el-button>
        </div>
        <el-table :data="tableData" border stripe:header-cell-class-name="headerBg">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="120">
          </el-table-column>
          <el-table-column prop="address" label="卖家用户名">
          </el-table-column>
          <el-table-column>
            <template slot-scope="scape">
              <el-button type="primary">编辑</el-button>
              <el-button type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
              :page-sizes="[5, 10, 15, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
          </el-pagination>
        </div>
      </el-main>

    </el-container>
  </el-container>

</template>

<script>
import Aside from "@/components/Aside";

export default {
  name: 'HomeView',
  components:{
    Aside
  },

  data() {
    const item = {
      date: '2022-4-20',
      name: '水果',
      address: '陆王胜'

    };
    const item1 = {
      date: '2022-4-20',
      name: '书籍',
      address: '郑志龙'

    };
    const item2 = {
      date: '2022-4-20',
      name: '文具',
      address: '谢天'

    };

    return {
      tableData: Array(3).fill(item,0).fill(item1,1).fill(item2,2)
    }
  }
}
</script>
